<template>
  <div class="content">
    <card title="动态管理" size="large">
      <el-button plain :icon="RefreshRight" size="default" @click="reset()">重置</el-button>
      <template #main>
        <el-row>
          <el-col :span="8">
            <div class="form-item">
              <span>动态内容</span>
              <el-input 
                v-model.trim="queryData.content" 
                placeholder="请输入动态内容"
                clearable
                @keyup.enter.native="search()"
                @change="search()">
              </el-input>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="form-item">
              <span>发布人</span>
              <el-input 
                v-model.trim="queryData.nickname" 
                placeholder="请输入发布人"
                clearable
                @keyup.enter.native="search()"
                @change="search()">
              </el-input>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="btn-item">
              <el-button type="primary" size="default" plain :icon="Search" @click="search()">
                搜索
              </el-button>
            </div>
          </el-col>
        </el-row>
      </template>
    </card>
    <div class="card-content">
      <div class="oper-box">
        <el-button type="primary" plain :icon="Delete" @click="handleBatchDelete" v-show="globalStore.deleteAuthority">批量删除</el-button>
      </div>
      <el-table
        :data="tableData"
        ref="multipleTableRef"
        v-loading="loading"
        row-key="id"
        size="default"
        empty-text="暂无数据"
        highlight-current-row
        class="primary-table"
        @selection-change="handleSelect"
        @select-all="handleSelectAll">
        <el-table-column type="selection" width="55" align="center" fixed="left" />
        <el-table-column prop="content" label="动态内容" min-width="150" show-overflow-tooltip fixed="left"></el-table-column>
        <el-table-column prop="user_tab.nickname" label="发布人" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="triend_like_count" label="点赞数量"  min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="triend_comment_count" label="评论数量"  min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="create_time" label="发布时间" sortable min-width="170" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="updateTime" label="更新时间" min-width="170" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template #default="scope">
            <el-tooltip content="详情" placement="top">
                <el-button 
                    link 
                    type="primary" 
                    :icon="View" 
                    @click="handleDetail(scope.$index, scope.row)">
                </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
                <el-button 
                    link 
                    type="primary" 
                    :icon="Delete" 
                    @click="handleDelete(scope.$index, scope.row)"
                    v-show="globalStore.deleteAuthority">
                </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="queryData.pageSize"
        :current-page="queryData.pageNum"
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-sizes="[10, 20, 30, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog
        v-if="dialogDetail"
        v-model="dialogDetail"
        title="动态详情"
        top="8vh"
        class="log-dialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
        @befor-close="handleClose">
        <dynamic-details :id="currentRow.triend_id || ''" :rowData="currentRow"></dynamic-details>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// import { Search } from '@element-plus/icons-vue'
import { ref,onMounted } from 'vue'
import card from '../../components/card/index.vue'
import dynamicDetails from './components/dynamicDetails.vue'
import { Delete, Search, RefreshRight, View } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTriendsBySearch,deleteTriendById,deleteTriendAmount } from '../../api/triend'
import useGlobalStore from '../../store/modules/global';

const globalStore = useGlobalStore()
//搜索
// const searchInput = ref('')
const queryData = ref({
  content: '',
  nickname: '',
  pageSize: 20,
  pageNum: 1,
  sortFieldName:'create_time',
  sortOrder:'DESC'
})

const total = ref(0)
const loading = ref(false)
const multipleSelection = ref([])

const dialogDetail = ref(false)
const currentRow:any = ref({})
const currentIndex = ref(0)



// interface tableDataInterface {
//   id: number,
//   dynamicContent: string,
//   username: string,
//   nickName: string,
//   userid: string,
//   likeNum: number,
//   commentNum: number,
//   createTime: string,
//   updateTime: string
// }
//表格部分
const tableData = ref([])

// 查看详情
const handleDetail = (index: number, row: Object) => {
  currentRow.value = row
  currentIndex.value = index
  dialogDetail.value = true
}
const handleClose = () => {
  currentRow.value = {}
  currentIndex.value = 0
  dialogDetail.value = false
}
// 删除
const handleDelete = (index: any, row: any) => {
  console.log('index: ', index);
  ElMessageBox.confirm('确认删除该条动态？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async() => {
      // 调删除接口
    const result = await deleteTriendById({
      triend_id:row.triend_id
    })
    //@ts-ignore
    if(result.code == 1){
      ElMessage({
          type: 'success',
          message: '删除成功',
          showClose: true
      })
      search()
    }
  }).catch(() => {
      ElMessage({
          type: 'info',
          message: '已取消删除！',
          showClose: true
      })
  })
}
// 批量删除
const handleBatchDelete = () => {
  if (!multipleSelection.value.length) {
      ElMessage({
          type: 'warning',
          message: '请先选择动态！',
          showClose: true
      })
      return
  }
  ElMessageBox.confirm('确认删除选中的动态？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async() => {
      const result = await deleteTriendAmount({
        triends:multipleSelection.value
      })
      //@ts-ignore
      if(result.code == 1){
        ElMessage({
          type: 'success',
          message: '删除成功',
          showClose: true
        })
        search()
      }
  }).catch(() => {
      ElMessage({
          type: 'info',
          message: '已取消批量删除！',
          showClose: true
      })
  })
}
// 搜索
const search = async() => {
  tableData.value = []
  const result = await getTriendsBySearch(queryData.value)
  tableData.value = result.data
  //@ts-ignore
  total.value = result.total
}
// 重置
const reset = () => {
  queryData.value.nickname = ''
  queryData.value.content = ''
  queryData.value.pageNum = 1,
  queryData.value.pageSize = 10
  search()
}
const handleSizeChange = (size: number) => {
  queryData.value.pageSize = size
  queryData.value.pageNum = 1
  search()
}

const handleCurrentChange = (page: number) => {
  queryData.value.pageNum = page
  search()
}

const handleSelect = (selection: Object) => {
  //@ts-ignore
  multipleSelection.value = selection
}
const handleSelectAll = (selection: Object) => {
  //@ts-ignore
  multipleSelection.value = selection
}
onMounted(() => {
  search()
})
</script> 

<style lang="less" scoped>
.search-all {
  background-color: #fff;
  padding: 12px;

  .el-input {
    width: 600px;
    height: 50px;
  }

  #search-btn1,
  #search-btn2 {
    height: 100%;
    background-color: #6383ff;
    color: #fff;
  }  .el-button {
    height: 50px
  }
}

.table-all {
  padding: 12px;
  background-color: #fff;
  .page{
    position: relative;
    height: 20px;
    .el-pagination{
      position: absolute;
      top:0;
      right: 0;
      height: 20px;
    }
  }
}
</style>
